<!-- @author pengys5 -->
<link href="\webjars\ion.rangeSlider\2.1.4\css\ion.rangeSlider.css" rel="stylesheet">
<link href="\webjars\ion.rangeSlider\2.1.4\css\ion.rangeSlider.skinNice.css" rel="stylesheet">
<link href="\webjars\bootstrap-daterangepicker\2.1.24\css\bootstrap-daterangepicker.css" rel="stylesheet">
<style>
    .irs-with-grid {
        height: 50px;
    }

    .irs-line {
        top: 20px;
    }

    .irs-bar {
        top: 20px;
    }

    .irs-bar-edge {
        top: 20px;
    }

    .irs-slider {
        top: 12px;
    }

    .color-3 .irs-bar {
        background: #5bc0de;
    }

    .color-3 .irs-bar-edge {
        background: #5bc0de;
    }

    .color-3 .irs-single {
        background: #5bc0de;
    }
</style>

<div class="col-lg-7 color-3 col-sm-6">
    <input type="text" id="timeAxisInput" name="timeAxis" value=""/>
</div>
<div class="col-lg-3 col-sm-3" style="margin-top: 0.7%">
    <a id="timeAxisButton" class="btn btn-info" v-on:click="startOrStop()"
       v-if="hasAutoUpdate">
        <i id="timeAxisButtonIcon" class="fa fa-pause"> </i>
    </a>
    <div style="float:left; overflow: hidden; width:0px; height:0px; display: inline-block">
        <input type="text" id="dateRangeInput"/>
    </div>
    <a id="dataRangeBtn" class="btn btn-info" v-on:click="openCalendar()">
        <i class="fa fa-calendar"> </i>
    </a>
</div>